<template>
    <div class="page-login">
        <n-form class="login-form" ref="formRef" label-placement="left" label-width="auto" :model="model"
            :rules="rules">
            <n-form-item label="用户名:" path="username">
                <n-input v-model:value="model.username" placeholder="username" />
            </n-form-item>

            <n-form-item label="密码:" path="password">
                <n-input v-model:value="model.password" placeholder="password" type="password" />
            </n-form-item>

            <n-form-item>
                <n-button block type="primary" :loading="loading" @click="handleClick">
                    登录
                </n-button>
            </n-form-item>
        </n-form>
    </div>
</template>

<script>
import { login } from "@/api/user";


export default {
    data() {
        return {
            model: {
                username: "",
                password: "",
            },
            rules: {
                username: [
                    { required: true, message: "请输入username", trigger: "blur" },
                ],
                password: [
                    { required: true, message: "请输入password", trigger: "blur" },
                ],
            },
            loading: false,

        }
    },
    methods: {
        handleClick() {
            this.$refs.formRef.validate((errors) => {
                console.log("erros", errors);
                if (errors) {
                    return;
                }
                this.loading = true;
                login(this.model.username, this.model.password)
                    .then((response) => {
                        console.log("response", response);
                        this.$message.success("登录成功");
                    })
                    .finally(() => {
                        this.loading = false;
                    })

            })
        }
    },
}
</script>

<style lang="scss" scoped>
.page-login {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: aqua;

    .login-form {
        padding: 16px;
        width: 300px;
        border-radius: 10px;
        background-color: #fff;
    }
}
</style>
